<template>
  <div>
    <div class="warning custom-block">
      <p class="custom-block-title">
        Valor Permitido
      </p>
      <p>
        La propiedad color permite los colores principales de vuesax ( <b>Primary(default)</b>, <b>Success</b>, <b>danger</b>, <b>warn</b>, <b>dark</b> )
        <br>
        Tambien estan permitidos los colores (<b>RGB</b> y <b>HEX</b>)
      </p>
    </div>
    <div class="tip custom-block">
      <p class="custom-block-title">
        Colores Boolean (Opcional)
      </p>
      <p>
        Ahora puedes usar los colores principales directamente en el componente como un valor <code>Boolean</code>
        <br>
        si quieres que el componente sea de color <code>warn</code> con agregar la propiedad <code>warn</code> al componente ya se cambiara el color
      </p>
    </div>
  </div>
</template>
